<template>
<div class="docker">
    <div v-for="(item,index) in dockerList" :key="index"
       :class="{'docker__item': true, 'docker__item--active': index === 0}">
      <div class="iconfont" v-html="item.icon"/> <!--不需要进行转义-->
      <div class="docker__title">{{item.text}}</div>
    </div>
</div>
</template>

<script>
export default {
  name: 'HomeDocker',
  setup () {
    const dockerList = [
      { icon: '&#xe6af;', text: '首页' },
      { icon: '&#xe680;', text: '购物车' },
      { icon: '&#xe60c;', text: '订单' },
      { icon: '&#xe610;', text: '我的' }
    ]
    return { dockerList }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
.docker {
  display: flex;
  position: absolute;
  box-sizing: border-box; //固定CSS盒子的高度
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  height: .49rem;
  width: 100%;
  color: $content-font-color;
  border-top: .01rem solid $content-bg-color;
  &__item {
  flex: 1;
  text-align: center;
    .iconfont {
      margin: .07rem 0 .02rem 0;
      font-size: .18rem;
    }
    &--active {
      color: #1FA4FC;
    }
  }
  &__title {
  font-size: .2rem;
  transform: scale(.5 ,.5);
  transform-origin: center top;
  }
}
</style>
